<template>
    <div class="tagsitem_box">
        <div :types="ccolor"  @click="setUserTags" class="tagsitem a1" :class="{isload:isload}" v-if="isselect" :style="{color:'#fff',background:ccolor,borderColor:ccolor}"><i class="iconfont icon-jiazai"></i> <slot></slot></div>
        <div  @click="setUserTags" class="tagsitem" :class="{isload:isload}" v-else :style="{color:ccolor,background:'#fff',borderColor:ccolor}"><i class="iconfont icon-jiazai"></i> <slot></slot></div>
    </div>
</template>
<script>
  export default {
      data:function(){
          return {
              isload:false
          }
      },
      props: ['isselect','ccolor','tid'],
      created:function(){
          
      },
      watch:{
          
      },
      updated () {
          
      },
      methods:{
          setUserTags:function(){
              this.isload = true;
              if(this.isselect){
                  $.post(this.URL.server+'/api/user/delUserTags',{
                      appid:$vm.MsgBox.cs_user.appid,
                      openid:$vm.MsgBox.msg_user.openid,
                      tagid:this.tid
                  },(res) =>{
                      this.isload = false;
                      if(res.status == 1){
                        //   this.isselect = false;
                         var tagid_list = [];
                         for(var i in res.tagid_list){
                             tagid_list.push(res.tagid_list[i].toString());
                         }
                         $vm.MsgBox.msg_user.tagid_list = tagid_list;
                         $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,$vm.MsgBox.msg_user);
                      }else{

                      }
                      
                  });
              }else{
                  $.post(this.URL.server+'/api/user/setUserTags',{
                      appid:$vm.MsgBox.cs_user.appid,
                      openid:$vm.MsgBox.msg_user.openid,
                      tagid:this.tid
                  },(res) =>{
                      this.isload = false;
                      if(res.status == 1){
                        //   this.isselect = false;
                         var tagid_list = [];
                         for(var i in res.tagid_list){
                             tagid_list.push(res.tagid_list[i].toString());
                         }
                         $vm.MsgBox.msg_user.tagid_list = tagid_list;
                         $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.msg_user.user_id,$vm.MsgBox.msg_user);
                      }else{

                      }
                  });
              }
          }
      }
  };
</script>
<style scoped>
    @import url(../css/icfonts.css);
    @keyframes loading {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .tagsitem_box{
        display: inline-block;margin:3px 0;
    }
    .tagsitem{
        font-size: 14px;display: inline-block;padding:1px 6px;border-width: 1px;border-style: solid;border-radius: 2px; box-shadow: 0 0 0.5px 0px #666;
        margin-right: 5px;
    }
    .tagsitem i{
        font-size: 0;transition: all 0.1s;animation: loading 1s linear infinite;display: inline-block;
    }
    .tagsitem.isload i{
        font-size: 12px;
    }
</style>